import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import type { AnyObject } from '@/types'
import { Component, toNative } from 'vue-facing-decorator'

import { getDepartMemberList } from '@/api/sale'
import type { FilterDto } from '@/render/FilterRender'
import type { DepartMemberDto } from '@/api/sale/types'
import { DeptTypeCnEnum, PlatformTypeCnEnum, StaffInWorkStatusCnEnum } from '@/const/enum'
import DialogAllocateRercord from './components/DialogAllocateRercord'
import dayjs from 'dayjs'
@Component
export class DepartMember extends TableRender {

    showDialog = false

    saleOldId = null as null | number

    filterConfig() {
        return {
            deptId: {
                name: '所属分组',
                element: 'select',
                optionsType: 'saleDept'
            },
            date: {
                name: '选择月份',
                element: 'datetime',
                type: 'daterange',
                params: {
                    valueFormat: 'YYYY-MM-DD'
                }
            },
        } as FilterDto
    }

    tableColumnConfigOld = () => [
        {
            field: 'salesName',
            title: '离职成员',
        },
        {
            field: 'deptName',
            title: '所属分组',
        },
        {
            field: 'roleName',
            title: '角色权限',
        },
        {
            field: 'allocateAmt',
            title: '分配客户数',
        },
        {
            field: 'unAllocateAmt',
            title: '未分配客户数',
            slots: {
                default: ({row}) => {
                    return row.unAllocateAmt ? <div class="text-orange">{row.unAllocateAmt}</div> : '--'
                }
            }
        },
        {
            field: 'updateTime',
            title: '离职时间',
            formatter: ({row}) => {
                return dayjs(row.updateTime).format('YYYY-MM-DD')
            }
        },
        {
            field: 'updateUserName',
            title: '操作人',
        },
        {
            field: 'operate',
            title: '操作',
            fixed: 'right',
            width: 160,
            params: {
                buttons: [
                    {
                        text: '分配记录',
                        event: (row) => this.onShowDialog(row)
                    },
                    // {
                    //     type: 'primary',
                    //     text: '去分配',
                    //     event: (row) => {}
                    // }
                ]
            },
            slots: {
                default: 'buttons'
            }
        }
    ]  as TableRenderColumnTypes<DepartMemberDto>

    onLoadData(page: number, size: number, filters: AnyObject) {
        const params = this.getFilters()
        const startTime = filters.date?.[0] ?? ''
        const endTime = filters.date?.[1] ?? ''
        delete params.date
        return getDepartMemberList({
            auditStatus: StaffInWorkStatusCnEnum.离职,
            pageNum: page,
            pageSize: size,
            startTime,
            endTime,
            ...filters
        })
    }

    onShowDialog(row: DepartMemberDto) {
        this.showDialog = true
        this.saleOldId = row.id
        console.log(row)
    }

    renderStatistics() {
        return <div></div>
    }

    render() {
        return (
            <>
                {super.render()}
                <DialogAllocateRercord v-model:show={this.showDialog} saleOldId={this.saleOldId as number} />
            </>
        )
    }
}

export default toNative(DepartMember)
